<template>
  <view class="hb-flex-1 hb-h-full" @click.stop="toSearchPage">
    <view
      class="hb-w-full hb-h-full search hb-rounded-3xl hb-transition-colors hb-duration-200 hb-flex hb-items-center hb-justify-center hb-px-4"
      :class="isBoxShadow && ['hb-box-shadow-base']"
      :style="{
        backgroundColor,
        color: textColor,
      }"
    >
      <template v-if="searchVal && isShowVal">
        <view class="hb-flex-1 hb-flex hb-items-center hb-justify-between">
          <text class="hb-flex-1 text-overflow-1">{{ searchVal }}</text>
          <text
            class="ali-icon icon-guanbi1 hb-text-base hb-text-gray-300"
            @click.stop="clearVal"
          ></text>
        </view>
      </template>
      <template v-else>
        <text class="ali-icon hb-mr-1 hb-text-base">&#xe694;</text>
        <text class="hb-text-sm">{{ text }}</text>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';

  const props = defineProps({
    backgroundColor: propTypes.string.def('#F2F3F5'),
    textColor: propTypes.string.def('#969799'),
    text: propTypes.string.def('搜索'),
    isShowVal: propTypes.bool.def(true),
    isBoxShadow: propTypes.bool.def(false),
  });

  const emit = defineEmits(['confirm']);

  const searchVal = ref('');

  function toSearchPage() {
    navigateTo({
      name: 'searchPage',
      options: {
        placeholder: props.text,
        success: (val) => {
          searchVal.value = val;
          emit('confirm', val);
        },
      },
    });
  }

  function clearVal() {
    if (searchVal.value) {
      searchVal.value = '';
      emit('confirm', '');
    }
  }

  defineExpose({
    clearVal,
  });
</script>

<style scoped></style>
